<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印设计器帮助手册</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        .main-container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 280px;
            background: #2c3e50;
            color: white;
            overflow-y: auto;
            position: fixed;
            height: 100vh;
            left: 0;
            top: 0;
        }

        .sidebar-header {
            padding: 20px;
            background: #34495e;
            border-bottom: 1px solid #4a5f7a;
        }

        .sidebar-header h1 {
            margin: 0;
            font-size: 18px;
            color: #ecf0f1;
            text-align: center;
        }

        .nav-menu {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .nav-item {
            border-bottom: 1px solid #4a5f7a;
        }

        .nav-link {
            display: block;
            padding: 15px 20px;
            color: #bdc3c7;
            text-decoration: none;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }

        .nav-link:hover {
            background: #34495e;
            color: #ecf0f1;
            border-left-color: #3498db;
        }

        .nav-link.active {
            background: #3498db;
            color: white;
            border-left-color: #2980b9;
        }

        .nav-submenu {
            list-style: none;
            padding: 0;
            margin: 0;
            background: #34495e;
        }

        .nav-submenu .nav-link {
            padding: 10px 20px 10px 40px;
            font-size: 14px;
            border-left: none;
        }

        .nav-submenu .nav-link:hover {
            background: #2c3e50;
            border-left: none;
        }

        .content {
            flex: 1;
            margin-left: 280px;
            padding: 30px;
            background: white;
            min-height: 100vh;
        }

        .content h1 {
            color: #1890ff;
            text-align: center;
            border-bottom: 2px solid #1890ff;
            padding-bottom: 10px;
            margin-bottom: 30px;
        }

        .content h2 {
            color: #1890ff;
            margin-top: 30px;
            margin-bottom: 15px;
            border-left: 4px solid #1890ff;
            padding-left: 15px;
        }

        .content h3 {
            color: #666;
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .feature-list {
            background: #f0f8ff;
            padding: 15px;
            border-radius: 5px;
            margin: 10px 0;
        }

        .feature-list ul {
            margin: 0;
            padding-left: 20px;
        }

        .feature-list li {
            margin: 5px 0;
        }

        .tip {
            background: #fff7e6;
            border: 1px solid #ffd591;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }

        .warning {
            background: #fff2f0;
            border: 1px solid #ffccc7;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }

        .step {
            background: #f6ffed;
            border: 1px solid #b7eb8f;
            padding: 15px;
            border-radius: 4px;
            margin: 15px 0;
        }

        .step-number {
            background: #52c41a;
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: inline-block;
            text-align: center;
            line-height: 24px;
            margin-right: 10px;
            font-weight: bold;
        }

        code {
            background: #f5f5f5;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }

        .shortcut {
            background: #e6f7ff;
            border: 1px solid #91d5ff;
            padding: 8px;
            border-radius: 4px;
            margin: 5px 0;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 6px;
        }

        th {
            background: #f0f8ff;
        }

        .section {
            margin-bottom: 40px;
        }

        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }

            .sidebar.open {
                transform: translateX(0);
            }

            .content {
                margin-left: 0;
            }

            .mobile-toggle {
                display: block;
                position: fixed;
                top: 20px;
                left: 20px;
                z-index: 1000;
                background: #3498db;
                color: white;
                border: none;
                padding: 10px;
                border-radius: 5px;
                cursor: pointer;
            }
        }

        .mobile-toggle {
            display: none;
        }
    </style>
</head>

<body>
    <button class="mobile-toggle" onclick="toggleSidebar()">☰</button>

    <div class="main-container">
        <div class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <h1>打印设计器帮助</h1>
            </div>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#overview" class="nav-link">📋 功能概述</a>
                </li>
                <li class="nav-item">
                    <a href="#quickstart" class="nav-link">🎯 快速开始</a>
                </li>
                <li class="nav-item">
                    <a href="#toolbar" class="nav-link">🛠️ 工具栏功能</a>
                    <ul class="nav-submenu">
                        <li><a href="#position-control" class="nav-link">位置控制</a></li>
                        <li><a href="#alignment" class="nav-link">对齐功能</a></li>
                        <li><a href="#other-tools" class="nav-link">其他功能</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="#print-settings" class="nav-link">⚙️ 打印设置详解</a>
                    <ul class="nav-submenu">
                        <li><a href="#page-settings" class="nav-link">页面设置</a></li>
                        <li><a href="#preprocess-script" class="nav-link">预处理脚本</a></li>
                        <li><a href="#user-input" class="nav-link">用户输入</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="#variable-binding" class="nav-link">📝 变量绑定语法</a>
                    <ul class="nav-submenu">
                        <li><a href="#basic-syntax" class="nav-link">基本语法</a></li>
                        <li><a href="#special-syntax" class="nav-link">特殊语法</a></li>
                        <li><a href="#data-conversion" class="nav-link">数据转换特性</a></li>
                        <li><a href="#usage-examples" class="nav-link">使用示例</a></li>
                        <li><a href="#common-scenarios" class="nav-link">常见应用场景</a></li>
                        <li><a href="#extend-model" class="nav-link">扩展型号取值</a></li>
                        <li><a href="#customer-extend" class="nav-link">客户扩展字段</a></li>
                        <li><a href="#product-expand" class="nav-link">常购商品扩展备注</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="#components" class="nav-link">🎨 组件使用说明</a>
                    <ul class="nav-submenu">
                        <li><a href="#positioning" class="nav-link">定位方式</a></li>
                        <li><a href="#text-component" class="nav-link">文本组件</a></li>
                        <li><a href="#image-component" class="nav-link">图片组件</a></li>
                        <li><a href="#table-component" class="nav-link">表格组件</a></li>
                        <li><a href="#barcode-component" class="nav-link">条形码/二维码</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="#tips" class="nav-link">💡 使用技巧</a>
                </li>
                <li class="nav-item">
                    <a href="#number-format" class="nav-link">🔢 数值格式化</a>
                </li>
                <li class="nav-item">
                    <a href="#faq" class="nav-link">🔧 常见问题</a>
                </li>
                <li class="nav-item">
                    <a href="#support" class="nav-link">📞 技术支持</a>
                </li>
            </ul>
        </div>

        <div class="content">
            <h1>打印设计器使用帮助</h1>

            <div id="overview" class="section">
                <h2>📋 功能概述</h2>
                <div class="feature-list">
                    <p>打印设计器是一个强大的可视化打印模板设计工具，支持：</p>
                    <ul>
                        <li>拖拽式组件设计</li>
                        <li>多种打印元素（文本、图片、表格、条形码等）</li>
                        <li>精确的位置和尺寸控制</li>
                        <li>实时预览功能</li>
                        <li>模板保存和加载</li>
                        <li>JavaScript预处理脚本</li>
                        <li>用户输入参数配置</li>
                    </ul>
                </div>
            </div>

            <div id="quickstart" class="section">
                <h2>🎯 快速开始</h2>
                <div class="step">
                    <div class="step-number">1</div>
                    <strong>创建新模板</strong>
                    <p>点击左侧工具栏中的组件，将其添加到设计区域</p>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <strong>调整组件属性</strong>
                    <p>选中组件后，在右侧面板中调整位置、大小、样式等属性</p>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <strong>设置打印参数</strong>
                    <p>点击"打印参数"按钮，配置纸张大小、边距等基本设置</p>
                </div>
                <div class="step">
                    <div class="step-number">4</div>
                    <strong>预览和保存</strong>
                    <p>点击"预览"查看效果，满意后点击"保存"保存模板</p>
                </div>
            </div>

            <div id="toolbar" class="section">
                <h2>🛠️ 工具栏功能</h2>
                <div id="position-control">
                    <h3>位置控制</h3>
                    <div class="shortcut">
                        <strong>左移/右移/上移/下移：</strong> 精确调整选中组件的位置，每次移动1像素
                    </div>
                </div>

                <div id="alignment">
                    <h3>对齐功能</h3>
                    <div class="shortcut">
                        <strong>左对齐/顶对齐：</strong> 将多个选中的组件按指定方式对齐
                    </div>
                </div>

                <div id="other-tools">
                    <h3>其他功能</h3>
                    <ul>
                        <li><strong>打印参数：</strong> 设置纸张尺寸、边距、缩放等</li>
                        <li><strong>源码：</strong> 查看和编辑模板的JSON源码</li>
                        <li><strong>保存：</strong> 保存当前模板</li>
                        <li><strong>预览：</strong> 预览打印效果</li>
                        <li><strong>回滚：</strong> 撤销上一步操作</li>
                    </ul>
                </div>
            </div>

            <div id="print-settings" class="section">
                <h2>⚙️ 打印设置详解</h2>

                <div id="page-settings">
                    <h3>页面设置</h3>
                    <ul>
                        <li><strong>纸张宽度/高度：</strong> 设置打印纸张的尺寸（毫米）</li>
                        <li><strong>左边距/上边距：</strong> 设置打印内容的边距</li>
                        <li><strong>缩放比例：</strong> 调整整体缩放比例</li>
                        <li><strong>页面旋转：</strong> 旋转90度打印</li>
                        <li><strong>自适应高度：</strong> 根据内容自动调整高度</li>
                        <li><strong>全局字体：</strong> 设置默认字体</li>
                    </ul>
                </div>

                <div id="preprocess-script">
                    <h3>预处理脚本</h3>
                    <div class="tip">
                        <strong>💡 提示：</strong> 预处理脚本可以在打印前对数据进行处理，支持JavaScript语法
                    </div>
                    <p>脚本模板：</p>
                    <code>
let data = arguments[0]; // 获取传入的打印数据<br>
// 在这里添加你的处理逻辑<br>
return data; // 返回处理完的数据
                    </code>
                </div>

                <div id="user-input">
                    <h3>用户输入</h3>
                    <p>配置打印时需要用户输入的参数：</p>
                    <ul>
                        <li><strong>输入类型：</strong> 文本输入或下拉选择</li>
                        <li><strong>默认值：</strong> 设置参数的默认值</li>
                        <li><strong>选择项：</strong> 下拉选择的选项列表</li>
                    </ul>
                </div>
            </div>

            <div id="variable-binding" class="section">
                <h2>📝 变量绑定语法</h2>
                <div class="tip">
                    <strong>💡 变量绑定说明：</strong> 在打印模板中，使用 <code>${变量路径}</code> 的格式来绑定动态数据，支持多级路径访问和数组索引
                </div>

                <div id="basic-syntax">
                    <h3>基本语法</h3>
                    <ul>
                        <li><strong>简单字段：</strong> <code>${companyName}</code> - 获取 companyName 字段值</li>
                        <li><strong>数组访问：</strong> <code>${expandBz[0]}</code> - 获取 expandBz 字段里的第一个成员</li>
                        <li><strong>对象属性：</strong> <code>${list[0].productName}</code> - 获取 list 属性的第一个成员的 productName
                        </li>
                        <li><strong>嵌套访问：</strong> <code>${list[0].numberExpand[0]}</code> - 获取 list 属性的第一个成员的
                            numberExpand 属性的第一个成员
                        </li>
                    </ul>

                    <h4>扩展型号取值方式</h4>
                    <div id="extend-model" class="tip">
                        <strong>💡 扩展型号说明：</strong> 扩展型号字段支持两种取值方式，推荐使用数组索引方式
                    </div>
                    <ul>
                        <li><strong>传统方式：</strong> <code>${numberExpand1}</code> - 获取扩展型号第1数值</li>
                        <li><strong>传统方式：</strong> <code>${numberExpandn}</code> - 获取扩展型号第n数值，依次类推</li>
                        <li><strong>推荐方式（V12.1.0+）：</strong> <code>${numberExpand[0]}</code> - 获取扩展型号第1数值</li>
                        <li><strong>推荐方式（V12.1.0+）：</strong> <code>${numberExpand[n]}</code> - 获取扩展型号第n数值</li>
                    </ul>

                    <h4>客户扩展字段取值方式</h4>
                    <div id="customer-extend" class="tip">
                        <strong>💡 客户扩展字段说明：</strong> 客户扩展字段使用点号语法访问具体的扩展属性
                    </div>
                    <ul>
                        <li><strong>扩展属性访问：</strong> <code>${extendBz.抬头}</code> - 获取客户扩展字段"抬头"的值</li>
                        <li><strong>扩展属性访问：</strong> <code>${extendBz.地址}</code> - 获取客户扩展字段"地址"的值</li>
                        <li><strong>扩展属性访问：</strong> <code>${extendBz.联系人}</code> - 获取客户扩展字段"联系人"的值</li>
                    </ul>

                    <h4>常购商品扩展备注取值方式</h4>
                    <div id="product-expand" class="tip">
                        <strong>💡 常购商品扩展备注说明：</strong> 常购商品扩展备注使用数组索引方式访问
                    </div>
                    <ul>
                        <li><strong>数组索引访问：</strong> <code>${expandBz[0]}</code> - 获取扩展备注第1属性</li>
                        <li><strong>数组索引访问：</strong> <code>${expandBz[n]}</code> - 获取扩展备注第n属性</li>
                    </ul>

                    <div class="warning">
                        <strong>⚠️ 重要提醒：</strong> 请注意区分以下两个字段的拼写细节
                        <ul>
                            <li><strong>客户扩展字段：</strong> <code>extendBz</code>（注意是 <code>extend</code>）</li>
                            <li><strong>常购商品扩展备注：</strong> <code>expandBz</code>（注意是 <code>expand</code>）</li>
                        </ul>
                        <p>虽然两个字段名称相似，但拼写不同，用途也不同，请在使用时仔细区分。</p>
                    </div>
                </div>

                <div id="special-syntax">
                    <h3>特殊语法</h3>
                    <div class="warning">
                        <strong>⚠️ 重要提示：</strong> 在表格循环行中需要获取上层数据时，需要使用 <code>${_.字段名}</code> 的格式
                    </div>
                    <ul>
                        <li><strong>根数据访问：</strong> <code>${_.expandBz[0]}</code> - 获取根数据的 expandBz 属性第一个成员</li>
                        <li><strong>应用场景：</strong> 在表格行循环中访问表格外的数据，如公司信息、打印时间等</li>
                    </ul>
                </div>

                <div id="data-conversion">
                    <h3>数据转换特性</h3>
                    <div class="tip">
                        <strong>💡 自动转换：</strong> 多级路径取值中遇到的属性字段如果为 JSON 字符串会自动转换，无需手动解析
                    </div>
                </div>

                <div id="usage-examples">
                    <h3>使用示例</h3>
                    <div class="step">
                        <div class="step-number">1</div>
                        <strong>文本组件绑定</strong>
                        <p>在文本组件的"内容"属性中输入：<code>公司名称：${companyName}</code></p>
                    </div>
                    <div class="step">
                        <div class="step-number">2</div>
                        <strong>表格数据绑定</strong>
                        <p>在表格组件的"数据源"属性中设置：<code>${list}</code>，在列绑定中使用：<code>${productName}</code></p>
                    </div>
                    <div class="step">
                        <div class="step-number">3</div>
                        <strong>复杂路径绑定</strong>
                        <p>访问嵌套数据：<code>${order.items[0].product.category.name}</code></p>
                    </div>
                </div>

                <div class="warning">
                    <strong>⚠️ 注意事项：</strong>
                    <ul>
                        <li>变量名区分大小写，请确保与数据源中的字段名完全一致</li>
                        <li>数组索引从 0 开始计数</li>
                        <li>如果访问的路径不存在，将显示为空或默认值</li>
                        <li>在表格循环中，当前行数据可以直接使用字段名，无需加前缀</li>
                        <li>使用 <code>${_.字段名}</code> 可以访问表格外的根数据</li>
                    </ul>
                </div>

                <div id="common-scenarios">
                    <h3>常见应用场景</h3>
                    <ul>
                        <li><strong>订单打印：</strong> <code>订单号：${orderNo}</code>、<code>客户：${customer.name}</code></li>
                        <li><strong>产品标签：</strong> <code>产品：${productName}</code>、<code>规格：${specifications[0]}</code>
                        </li>
                        <li><strong>库存报表：</strong> <code>仓库：${_.warehouseName}</code>、<code>日期：${_.printDate}</code>
                        </li>
                        <li><strong>发票打印：</strong> <code>金额：${totalAmount}</code>、<code>税率：${taxRate}%</code></li>
                    </ul>
                </div>
            </div>

            <div id="components" class="section">
                <h2>🎨 组件使用说明</h2>

                <div id="positioning">
                    <h3>定位方式</h3>
                    <div class="tip">
                        <strong>💡 定位方式说明：</strong> 组件支持两种定位方式，可在组件属性面板中进行设置
                    </div>
                    <ul>
                        <li><strong>绝对定位（默认）：</strong> 组件位置相对于页面左上角固定，不受其他组件影响</li>
                        <li><strong>相对定位：</strong> 组件位置相对于前一个组件或指定参考点，适合需要动态调整的场景</li>
                    </ul>

                    <div class="step">
                        <div class="step-number">1</div>
                        <strong>设置定位方式</strong>
                        <p>选中组件后，在右侧属性面板中找到"定位方式"选项</p>
                    </div>
                    <div class="step">
                        <div class="step-number">2</div>
                        <strong>选择定位类型</strong>
                        <p>选择"绝对定位"或"相对定位"，系统会自动调整相关的定位参数</p>
                    </div>
                    <div class="step">
                        <div class="step-number">3</div>
                        <strong>调整位置参数</strong>
                        <p>根据选择的定位方式，设置相应的X、Y坐标或偏移量</p>
                    </div>

                    <div class="warning">
                        <strong>⚠️ 定位方式注意事项：</strong>
                        <ul>
                            <li>绝对定位适合固定位置的元素，如页眉、页脚、固定标签等</li>
                            <li>相对定位适合动态内容，如表格行、列表项等</li>
                            <li>切换定位方式可能会影响组件的位置，请谨慎操作</li>
                            <li>相对定位的组件位置会随着参考组件的变化而变化</li>
                            <li>使用相对定位时，左侧组件列表中的顺序很重要，可以通过拖动调整组件顺序来控制相对定位的参考关系</li>
                        </ul>
                    </div>
                </div>

                <div id="text-component">
                    <h3>文本组件</h3>
                    <ul>
                        <li>支持动态内容绑定</li>
                        <li>可设置字体大小、粗细、对齐方式</li>
                        <li>支持换行和特殊字符</li>
                    </ul>
                </div>

                <div id="image-component">
                    <h3>图片组件</h3>
                    <ul>
                        <li>支持本地图片和网络图片</li>
                        <li>可调整图片大小和位置</li>
                        <li>支持图片旋转</li>
                    </ul>
                </div>

                <div id="table-component">
                    <h3>表格组件</h3>
                    <ul>
                        <li>支持动态数据绑定</li>
                        <li>可自定义表格样式</li>
                        <li>支持表头和表尾</li>
                    </ul>
                </div>

                <div id="barcode-component">
                    <h3>条形码/二维码</h3>
                    <ul>
                        <li>支持多种码制</li>
                        <li>可调整码的大小和位置</li>
                        <li>支持动态内容</li>
                    </ul>
                </div>
            </div>

            <div id="tips" class="section">
                <h2>💡 使用技巧</h2>

                <div class="tip">
                    <strong>多选操作：</strong> 按住Shift键可以同时选择多个组件进行批量操作
                </div>

                <div class="tip">
                    <strong>移动模式：</strong> 双击组件可以进入移动模式，方便快速调整组件位置
                </div>

                <div class="tip">
                    <strong>组件顺序调整：</strong> 左侧的组件标签可以拖动调整顺序，这在设置相对定位时非常重要，因为相对定位的组件位置会依赖于组件列表中的顺序
                </div>

                <div class="tip">
                    <strong>精确对齐：</strong> 使用对齐功能可以快速实现组件的精确对齐
                </div>

                <div class="tip">
                    <strong>图层管理：</strong> 在左侧图层面板中可以调整组件的层级关系
                </div>

                <div class="warning">
                    <strong>⚠️ 注意事项：</strong>
                    <ul>
                        <li>保存前请确保所有设置正确</li>
                        <li>预处理脚本中的错误可能导致打印失败</li>
                        <li>建议定期备份重要的模板文件</li>
                        <li>打印前请先预览确认效果</li>
                    </ul>
                </div>
            </div>

            <div id="number-format" class="section">
                <h2>🔢 数值格式化（numeral.js）常用 format 示例</h2>
                <div class="tip">
                    <strong>💡 numeral.js 用于格式化数字，常用于金额、数量等字段的美化显示。</strong>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>格式字符串</th>
                            <th>说明</th>
                            <th>示例输出</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>0,0</code></td>
                            <td>千分位整数</td>
                            <td>10,000</td>
                        </tr>
                        <tr>
                            <td><code>0,0.00</code></td>
                            <td>千分位保留两位小数</td>
                            <td>10,000.23</td>
                        </tr>
                        <tr>
                            <td><code>0.00</code></td>
                            <td>保留两位小数</td>
                            <td>10000.23</td>
                        </tr>
                        <tr>
                            <td><code>0%</code></td>
                            <td>百分比</td>
                            <td>23%</td>
                        </tr>
                        <tr>
                            <td><code>0.00%</code></td>
                            <td>百分比保留两位小数</td>
                            <td>23.00%</td>
                        </tr>
                        <tr>
                            <td><code>￥0,0.00</code></td>
                            <td>人民币金额</td>
                            <td>￥10,000.23</td>
                        </tr>
                        <tr>
                            <td><code>0.00a</code></td>
                            <td>自动缩写（如k, m, b）</td>
                            <td>1.23k</td>
                        </tr>
                    </tbody>
                </table>
                <p>更多格式化规则请参考 <a href="http://numeraljs.com/" target="_blank">numeral.js 官方文档</a>。</p>
            </div>

            <div id="faq" class="section">
                <h2>🔧 常见问题</h2>

                <h3>Q: 如何调整组件的精确位置？</h3>
                <p>A: 选中组件后，在右侧属性面板中直接输入数值，或使用工具栏的移动按钮进行微调。</p>

                <h3>Q: 如何设置动态内容？</h3>
                <p>A: 在组件的属性设置中，使用 <code>{{变量名}}</code> 的格式来绑定动态数据。</p>

                <h3>Q: 预处理脚本如何使用？</h3>
                <p>A: 在打印设置中启用预处理，然后编写JavaScript代码来处理传入的数据。</p>

                <h3>Q: 如何保存和加载模板？</h3>
                <p>A: 点击"保存"按钮保存当前模板，通过"源码"功能可以导出和导入模板文件。</p>

                <h3>Q: 绝对定位和相对定位有什么区别？</h3>
                <p>A: 绝对定位是相对于页面左上角固定位置，适合固定元素；相对定位是相对于其他组件的位置，适合动态内容。可在组件属性面板中切换定位方式。</p>
            </div>

            <div id="support" class="section">
                <h2>📞 技术支持</h2>
                <p>如果您在使用过程中遇到问题，请：</p>
                <ul>
                    <li>查看本帮助文档</li>
                    <li>检查控制台错误信息</li>
                    <li>联系技术支持团队</li>
                </ul>
            </div>

            <div style="text-align: center; margin-top: 40px; color: #666;">
                <p>版本：1.0.0 | 最后更新：2025年</p>
            </div>
        </div>
    </div>

    <script>
        // 平滑滚动到锚点
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href').substring(1);
                const targetElement = document.getElementById(targetId);

                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });

                    // 更新活动状态
                    updateActiveNav(this);
                }
            });
        });

        // 更新导航活动状态
        function updateActiveNav(activeLink) {
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            activeLink.classList.add('active');
        }

        // 监听滚动，自动更新导航状态
        window.addEventListener('scroll', function () {
            const sections = document.querySelectorAll('.section');
            const navLinks = document.querySelectorAll('.nav-link');

            let current = '';
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;
                if (pageYOffset >= sectionTop - 200) {
                    current = section.getAttribute('id');
                }
            });

            navLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === '#' + current) {
                    link.classList.add('active');
                }
            });
        });

        // 移动端侧边栏切换
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('open');
        }

        // 点击内容区域时关闭移动端侧边栏
        document.querySelector('.content').addEventListener('click', function () {
            if (window.innerWidth <= 768) {
                document.getElementById('sidebar').classList.remove('open');
            }
        });
    </script>
</body>

</html>